<template>
  <div @wheel="handleWheel">
    <div v-show="isDivVisible" class="animated-div">
      <div class="header" >
        <div class="header-logo">
          <a href="/webhome"></a>
            <img alt="" class="message-icon" src="../../../assets/imgs/logo.png" />
        </div>
        <div class="page-header">
          <el-dropdown
            v-if="isAuthenticated"
            class="avatar-container"
            trigger="click"
          >
            <span class="el-dropdown-link">
              <img src="../../../assets/imgs/logo.png" class="user-avatar" />
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>我的作品</el-dropdown-item>
                    <el-dropdown-item divided @click="loginOut">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button
           class="login-button"
            v-else
            type="primary"
            @click="goToLogin"
          >
            登录
          </el-button>
        </div>
      </div>
    </div>
    <div class="scrollbar-container" style="height: 100vh; overflow-y: auto;" @scroll="handleScroll">
      <el-row :gutter="0">
        <el-col :span="4" v-for="imageGroup in images" :key="imageGroup[0].id">
            
          <div v-for="image in imageGroup" :key="image.id" class="column">
          <div class="grid-content ep-bg-purple image-container" @mouseover="showCaption(image.id)" @mouseleave="hideCaption(image.id)">
            <img
              :src="image.fileId"
              :alt="image.prompt"
              @load="onImageLoad"
              v-viewer
              class="image-item"
            />
            <!-- 底部文本容器 -->
            <div class="caption" v-if="captionVisible[image.id]">
              {{image.prompt}}
              <button class="copy-btn" @click="copyCaption(image.prompt)">复制</button>
            </div>
          </div>
        </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <!-- 备案信息区域 -->
  <div class="record-info-container">
    <div class="record-info">
      &copy; {{ currentYear }} 小码哥. All Rights Reserved. 
      <!-- 使用 a 标签实现点击跳转 -->
      <a href="http://www.yourbeian.gov.cn" target="_blank" rel="noopener noreferrer">
        备案号: 黔ICP备2021008163号-3
      </a>
      <a href="#" rel="noopener noreferrer">
        &nbsp;&nbsp;问题反馈WX:xmgcode88
      </a>
    </div>
  </div>
</template>

<script setup  lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { PictureApi, PictureVO } from '@/api/ai/picture'
import { getAccessToken } from '@/utils/auth'

import { ElMessageBox } from 'element-plus'

import avatarImg from '@/assets/imgs/avatar.gif'
import { useUserStore } from '@/store/modules/user'
import { useTagsViewStore } from '@/store/modules/tagsView'

const currentYear = ref(new Date().getFullYear());

const userStore = useUserStore()

const tagsViewStore = useTagsViewStore()

const message = useMessage() // 消息弹窗

const { t } = useI18n()

const { push, resolve,replace} = useRouter()

// 根据屏幕尺寸动态设置的模数
const moduloValue = ref(6); // 假设初始模数为6，适用于大屏幕

// getAccessToken()获取token，根据token判断是否登录
const isOrLogin = ref(getAccessToken() ? true : false);
const isAuthenticated = ref(isOrLogin);


// 用于控制文本显示的响应式对象
const captionVisible = ref({});

// 显示文本的函数
const showCaption = (imageId) => {
  captionVisible.value[imageId] = true;
};

// 隐藏文本的函数
const hideCaption = (imageId) => {
  captionVisible.value[imageId] = false;
};


// 复制文本的函数
const copyCaption = (prompt) => {
  const textToCopy = prompt; // 需要复制的文本
  if (navigator.clipboard && window.isSecureContext) {
    // 使用clipboard API进行复制
    navigator.clipboard.writeText(textToCopy)
      .then(() => {
        // 复制成功后的逻辑
        // alert('文本已复制到剪贴板');
        message.success(t('复制成功'));
      })
      .catch((err) => {
        // 复制失败的错误处理
        console.error('无法复制文本: ', err);
      });
  } else {
    // 浏览器不支持clipboard API时的回退逻辑
    console.error('Clipboard API 不支持');
  }
};

const loginOut = async () => {
  try {
    await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
      confirmButtonText: t('common.ok'),
      cancelButtonText: t('common.cancel'),
      type: 'warning'
    })
    await userStore.loginOut()
    tagsViewStore.delAllViews()
    // replace('/login?redirect=/index')
    window.open(resolve('/webhome').href)
  } catch {}
}


// itemSegmentation函数使用响应式变量moduloValue
const itemSegmentation = (item) => {
  let splitItems = [];
  item.forEach((item, index) => {
    let idx = index % moduloValue.value;
    if (!splitItems[idx]) {
      splitItems[idx] = [];
    }
    splitItems[idx].push(item);
  });
  return splitItems;
};

// 设置屏幕尺寸相关的逻辑
const setModuloBasedOnScreenSize = () => {
  if (window.innerWidth >= 1025) {
    moduloValue.value = 6; // 桌面端屏幕：% 6
  } else if (window.innerWidth >= 768 && window.innerWidth <= 1024) {
    moduloValue.value = 4; // 平板屏幕：% 4
  } else {
    moduloValue.value = 2; // 手机屏幕：% 2
  }
};

// const itemSegmentation = (item) => {
//   let splitItems = [];
//   item.forEach((item, index) => {
//     let idx = index % 6;
//     if (!splitItems[idx]) {
//       splitItems[idx] = [];
//     }
//     splitItems[idx].push(item);
//   });
//   return splitItems;
// };

const loading = ref(true);

//是否还有更多数据
const isMore = ref(true);

// const list = ref<PictureVO[]>([]);
const total = ref(0);


const images_data = ref([]);


const images = computed(() => {
  return itemSegmentation(images_data.value);
});


const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
});

/** 查询列表 */
const getList = async () => {

  loading.value = true;
  try {
    const data = await PictureApi.getWebPicturePage(queryParams);
    // list.value = data.list;
    console.info("data.list.lengthdata.list.length",data.list.length);
    if(data.list.length === 0){
      isMore.value = false;
    }
    images_data.value = [...images_data.value, ...data.list];
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};



const onImageLoad = () => {
  // 图片加载事件处理函数
}

const goToLogin = () => {
  window.open(resolve('/login').href)
}


const data=reactive({
    oldScrollTop:0,
});


// 控制div是否可见  
const isDivVisible = ref(true); 


// 处理滚轮事件的方法  
// 处理滚轮事件的方法  
const handleWheel = (event) => {  
  // 检查滚动方向  
  if (event.deltaY < 0) {  
    // 向上滚动时显示div  
    isDivVisible.value = true;  
  } else if (event.deltaY > 0) {  
    // 向下滚动时隐藏div  
    isDivVisible.value = false;  
  }  
};





// 当滚动到底部时，距离底部的距离小于等于10像素时触发alert
  const handleScroll = (event: WheelEvent) => {
    const scrollbarContainer = event.target as HTMLDivElement;
    const isNearBottom = scrollbarContainer.scrollHeight - scrollbarContainer.scrollTop === scrollbarContainer.clientHeight;

    if (isNearBottom) {
      if(isMore.value){
        queryParams.pageNo += 1; // 更新分页参数，加载下一页数据
        getList(); // 触发数据加载
      }else{
        message.info(t('我也是有底线的！'));
      }
      
    }
  };

  
// 如果需要监听整个window的滚动事件，可以在onMounted中添加  
onMounted(() => {  
  getList();//初始化图片列表
  window.addEventListener('wheel', handleWheel); 
  
  //自适应屏幕
  setModuloBasedOnScreenSize(); // 设置初始屏幕尺寸对应的模数
  window.addEventListener('resize', setModuloBasedOnScreenSize);


  let ro = new ResizeObserver(entries => {
     for (let entry of entries) {
       if (entry.contentRect.width <= 768) {
         isDivVisible.value = false;
       } else {
         isDivVisible.value = true; // 默认情况下，大屏幕尺寸下div可见
       }
     }
   });

   // 监听整个页面（body）
   ro.observe(document.body);
});  
  
// 在组件卸载前移除事件监听器  
onBeforeUnmount(() => {  
  window.removeEventListener('wheel', handleWheel);  
  //自适应屏幕
  window.removeEventListener('resize', setModuloBasedOnScreenSize);
});  
</script>

<style scoped>
.container {
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.column {
  padding: 0px 0; /*上下间隔*/
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin: 0 1px; /* 左右间隔为1px */
}
img {
  width: 100%;
}

.header {
  background: #f0f2f4;
  width: 100%;
  font-size: 0.875rem;
  opacity: 1 !important;
  display: flex;
  justify-content: space-between;
}
.header-logo {
  width: 200px; /* 设置左侧列的宽度为200px */
  border-color: transparent !important;
  background: #fff;
  height: 74px;
  transition: background-color 0.2s;
  border-bottom: 1px solid #dee2e6 !important;
}
.message-icon{
  width:200px;
  height: 74px;
}

.page-header {
  box-shadow: none;
  padding: 0 !important;
  display: flex;
  align-items: center;
  height: 74px;
  width: 100%;
  background-color: #0b364e;
}

/* 添加一个新的类，用于定位登录按钮 */
.login-button {
  position: absolute;
  top: 20px; /* 或者您希望的任何值 */
  right: 20px; /* 或者您希望的任何值 */
}

.animated-div {  
  /* 使用visibility来控制元素的可见性 */  
  visibility: visible;  
  opacity: 1;  
  transition: visibility 0s linear 0.5s, opacity 0.5s ease;  
}  
  
.animated-div[v-show="false"] {  
  visibility: hidden;  
  opacity: 0;  
}  

.avatar-container {
  display: inline-block;
  position: fixed;
  top: 20px;
  right: 20px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden; /* 确保内部元素不会溢出容器 */
}

.image-item {
  width: 100%;
  display: block;
}

/* 鼠标悬停时显示文本 */
.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: flex-end; /* 使按钮和文本靠右对齐 */
  align-items: center;
  transform: translateY(100%); /* 初始状态将.caption移到图片下方 */
  transition: transform 0.3s ease;
  font-size: 12px;

    /* ... 其他样式 ... */
  line-height: 15px; /* 设置行高为15px，确保文本高度固定 */
  /* 如果需要确保文本不会换行，可以设置一个最大宽度，并使用文本溢出 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 如果文本超出，则显示省略号 */
}

.caption:hover {
  transform: translateY(0); /* 鼠标悬停时将.caption移回原位 */
}

.copy-btn {
  margin: 0 10px; /* 给复制按钮一些边距 */
  padding: 5px; /* 给复制按钮一些内边距 */
  cursor: pointer;
  background-color: #fff; /* 复制按钮的背景色 */
  color: #000; /* 复制按钮的文字颜色 */
  border: none; /* 移除复制按钮的边框 */
  border-radius: 5px; /* 给复制按钮添加圆角 */
}

/* 鼠标悬停时显示文本和复制按钮 */
.image-container:hover .caption {
  transform: translateY(0);
}

/* 添加备案信息容器和文本的样式 */
.record-info-container {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 紧贴底部 */
  left: 0; /* 左侧对齐 */
  width: 100%; /* 宽度100% */
  background: #f0f2f4; /* 背景颜色 */
  padding: 10px 0; /* 上下内边距 */
  text-align: center; /* 文本居中 */
  font-size: 0.875rem; /* 字体大小 */
  z-index: 1000; /* 确保在页面内容上方 */
  border-top: 1px solid #dee2e6; /* 上边框 */
  height: 25px;
}

.record-info {
  /* 可以根据需要添加更多样式 */
  margin: 0;
}

.record-info a {
  color: inherit; /* 继承文本颜色 */
  text-decoration: none; /* 移除下划线 */
}

.record-info a:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

/* 页面最外层容器，增加padding-bottom以避免内容被覆盖 */
.scrollbar-container {
  padding-bottom: 50px; /* 根据备案信息区域的高度调整这个值 */
  height: calc(100vh - 50px); /* 减去底部添加的padding高度 */
  overflow-y: auto;
  margin-bottom: 100px;
}

/* 媒体查询，从大到小适配各种屏幕 */  
@media only screen and (min-width: 1025px) {  
  /* 桌面端大屏幕布局 */  
  .el-col {
    flex: 0 0 16.6%; /* 每行显示6列，铺满整个页面 */
    max-width: 16.6%; /* 设置最大宽度 */
  }

}  
@media only screen and (min-width: 768px) and (max-width: 1024px) {  
  /* 平板设备布局 */ 
  .el-col {
    flex: 0 0 33.3%; /* 每行显示3列，铺满整个页面 */
    max-width: 33.3%; /* 设置最大宽度 */
  } 

}  
@media only screen and (min-width: 481px) and (max-width: 767px) {  
  /* 较小的屏幕，如横屏手机 */  
  .el-col {
    flex: 0 0 50%; /* 每行显示四列，铺满整个页面 */
    max-width: 50%; /* 设置最大宽度 */
  }

}  
@media only screen and (max-width: 480px) {  
  /* 手机端小屏幕布局 */  
  .el-col {
    flex: 0 0 50%; /* 每行显示四列，铺满整个页面 */
    max-width: 50%; /* 设置最大宽度 */
  }
}
</style>